<template>
  <div class="latest">

    <common-nav></common-nav>
    <div class="standard-container" :style="modalValue ? 'paddingBottom:2rem':''">
      <latest-index :skinValue="skinValue" :lists="latests.rank"></latest-index>
    </div>

  </div>
</template>
<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import CommonNav from "../../components/common/common-nav"
  import LatestIndex from '~/components/latest/index.vue'
  import {State} from "vuex-class";
  import {Actions, Store} from "../../enums/Store";
  import {SkinInterface, StoreInterface,ModalInterface} from "../../interfaces/PageInterface";

  @Component({
    components:{
      CommonNav,

      LatestIndex
    }
  })
  export default  class Latest extends Vue {
    @State(Store.Skin) skinValue:SkinInterface[Store.Skin]
    @State(Store.Latest) latests:StoreInterface[Store.Latest]
	 @State(Store.IsModal) modalValue:ModalInterface[Store.IsModal]

    private created(){
      if(process.browser){
        if(localStorage.getItem('themesBg')){
          this.$store.dispatch(Actions.GetSkin,localStorage.getItem('themesBg'))
        }else{
          this.$store.dispatch(Actions.GetSkin,'0')
        }
      }
    }

    async fetch({store}){
      await store.dispatch(Actions.GetLatest)
    }

  }

</script>
<style lang="scss">

  @include component(latest){

     background: $bg-container;
     min-height: 100vh;

 }

</style>
